<template>
	<div>
		文字
		<Input
			v-model="value"
			placeholder="请输入"
			autocomplete="new-password"
			style="margin:20px;width:150px"
			@click.native="click"
			@blur="blur"
			@focus="focus">
			<template #append>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input v-model="value" style="margin:20px;width:150px">
			<template #prepend>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input value="" placeholder="自动聚焦" auto-focus style="margin:20px;width:150px"/>
		<Input value="测试测试测试测试测试测试测试测试测试12" readonly style="margin:20px;width:150px">
			<template #prepend>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input value="测试测试测试测试测试测试测试测试测试12" disable style="margin:20px;width:150px">
			<template #prepend>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input v-model="value" clearable disable placeholder="可清空" style="margin:20px;width:150px"/>
		<Input v-model="value" disable type="password" placeholder="请输入密码" style="margin:20px;width:150px"/>
		<Input v-model="value" shape="round" style="margin:20px;width:150px">
			<template #append>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input v-model="value" clearable placeholder="可清空" style="margin:20px;width:150px"/>
		<Input v-model="value" clearable placeholder="可清空" style="margin:20px;width:150px">
			<template #append>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input v-model="value" type="password" placeholder="请输入密码" style="margin:20px;width:150px"/>
		<Input v-model="value2" :maxlength="5" placeholder="最大长度" style="margin:20px;width:150px"/>
		<Input v-model="value" shape="noBorder" placeholder="无边框" style="margin:20px;width:150px"/>
		<Input v-model="value" shape="noBorder" disable placeholder="无边框" style="margin:20px;width:150px"/>
		<Input v-model="value" clearable shape="noBorder" placeholder="无边框可清空" style="margin:20px;width:150px"/>
		<Input v-model="value" type="password" shape="noBorder" placeholder="无边框密码" style="margin:20px;width:150px"/>
		<Input v-model="value" style="margin:20px;width:200px">
			<template #before>
				<Select v-model="val" :options="options"/>
			</template>
		</Input>
		<Input v-model="value" style="margin:20px;width:200px">
			<template #after>
				<Button type="primary" style="width:34px;padding:0"><icon name="search" size="22"/></Button>
			</template>
		</Input>
		<Input v-model="value" style="margin:20px;width:200px">
			<template #before>
				<Select v-model="val" :options="options"/>
			</template>
			<template #after>
				<Button type="primary" style="width:34px;padding:0"><icon name="search" size="22"/></Button>
			</template>
		</Input>
		<Input v-model="value" :options="options2" placeholder="待选项" style="margin:20px;width:150px" @click-option="clickOption">
			<template #prepend>
				<Icon name="fingerprint"/>
			</template>
		</Input>
		<Input v-model="value" :options="options2" placeholder="待选项" style="margin:20px;width:200px" @click-option="clickOption">
			<template #before>
				<Select v-model="val" :options="options"/>
			</template>
		</Input>
		<Input v-model="value" :options="options2" placeholder="待选项" style="margin:20px;width:200px" @click-option="clickOption">
			<template #after>
				<Button type="primary" style="width:34px;padding:0"><icon name="search" size="22"/></Button>
			</template>
		</Input>
		<Input v-model="value" :options="options2" placeholder="待选项" style="margin:20px;width:200px" @click-option="clickOption">
			<template #before>
				<Select v-model="val" :options="options"/>
			</template>
			<template #after>
				<Button type="primary" style="width:34px;padding:0"><icon name="search" size="22"/></Button>
			</template>
		</Input>
	</div>
</template>

<script>
import Input from '@/components/pc/input';
import Icon from '@/components/pc/icon';
import Button from '@/components/pc/button';
import Select from '@/components/pc/select';

export default {
	name:'index',
	components:{
		Input,
		Icon,
		Button,
		Select,
	},
	data(){
		return {
			value:'',
			value2:'',
			val:1,
			options:[
				{label:'选项',value:1},
				{label:'选项选项',value:2},
				{label:'选项选项选项',value:3},
			]
		};
	},
	computed:{
		options2(){
			const result=[];
			if(this.value){
				for(let i=0;i<1e5;++i){
					result.push('选项'+i);
				}
			}
			return result;
		}
	},
	methods:{
		click(){
			console.log('点击');
		},
		focus(){
			console.log('focus');
		},
		blur(){
			console.log('blur');
		},
		clickOption(data){
			console.log('clickOption',data);
		},
	}
};
</script>

<style lang="scss">

</style>
